<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../assets/js/base/vue.js" type="text/javascript" charset="utf-8"></script>
		<title>全局组建的创建和使用</title>
	</head>
	<body>

		<div id="app">
			<my-com1></my-com1>
			<my-com2></my-com2>
			<my-com3></my-com3>
			<login></login>
		</div>

		<template id="temp">
			<div>
				<h1>login</h1>
				<h4>有提示了</h4>
			</div>
		</template>
		
		<script type="text/javascript">
			/**
			 * 组件化：从UI界面的角度，方便UI组件的重用
			 * 模块化：从业务逻辑功能角度，方便代码分层开发，保证功能模块功能的单一
			 */
			// 全局组件创建的三种方式
			
			// 第一种：拆分
			// 使用Vue.extend({})创建template对象，然后使用Vue.component('组建名',组件模版对象引用)的方式创建对象
			var com1 = Vue.extend({
				// 通过template属性，制订了组件要展示的HTML结构
			  // template属性指向的html内容必须由且只有一个根元素<h2></h2><h3></h3>并列根元素不行
				template:"<h3>这是使用Vue.extend创建的组件</h3>"
			})
			// 组建名称注册的时候可以使用驼峰，但是使用的时候必须使用“-”隔开方式，如果不适用驼峰，可以直接使用
			Vue.component('myCom1', com1);
			// 合并
			// 第一个参数是组件名称，以html标签的方式使用
			// 第二个参数是创建的组件，
			Vue.component('myCom1', Vue.extend({
				template: "<h3>这是使用Vue.extend创建的组件</h3>" // 通过template属性，制订了组件要展示的HTML结构
			}));
		
			// 第二种：Vue.component第二个参数直接使用对象创建
			//	问题：template没有代码提示
			 Vue.component('myCom2', {
				template: "<h2>这是使用第二种方式创建的</h2>"
			})

			// 第三种： 同样是使用Vue.component创建组建对象，但是将template以ID选择器的方式进行引用
			//		优点：在编写template中的HTML结构的时候有代码提示
			Vue.component('myCom3', {
				template: "#temp"
			})
			
			
			var vm = new Vue({
				// 属性
				el: "#app",
				data: {
					comName: 'login-compon'
				}
			});
		</script>
	</body>
</html>
